<template>
  <div class="editor-container">
    <Toolbar :editor="editorRef" :mode="mode" />
    <Editor
      :mode="mode"
      :defaultConfig="state.editorConfig"
      :style="{ height }"
      v-model="state.editorVal"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @customPaste="customPaste"
    />
  </div>
</template>

<script setup name="wngEditor">
// https://www.wangeditor.com/v5/for-frame.html#vue3
import "@wangeditor/editor/dist/css/style.css";
import { reactive, shallowRef, watch, onBeforeUnmount } from "vue";
import { Toolbar, Editor } from "@wangeditor/editor-for-vue";
import { ElMessage } from "element-plus";
import { uploadImg } from "@/api/survey/surveyLog";
// import { getAPI } from '/@/utils/axios-utils';
// import { SysFileApi } from '/@/api-services/api';

// 定义父组件传过来的值
const props = defineProps({
  // 是否禁用
  disable: {
    type: Boolean,
    default: () => false,
  },
  // 内容框默认 placeholder
  placeholder: {
    type: String,
    default: () => "请输入内容...",
  },
  // https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
  // 模式，可选 <default|simple>，默认 default
  mode: {
    type: String,
    default: () => "default",
  },
  // 高度
  height: {
    type: String,
    default: () => "310px",
  },
  // 双向绑定，用于获取 editor.getHtml()
  getHtml: String,
  // 双向绑定，用于获取 editor.getText()
  getText: String,
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(["update:getHtml", "update:getText"]);

// 定义变量内容
const editorRef = shallowRef();
const state = reactive({
  editorConfig: {
    placeholder: props.placeholder,
    // 菜单配置
    MENU_CONF: {
      uploadImage: {
        fieldName: "file",
        customUpload(file, insertFn) {
          console.log(file, "file");
          const uploadFun = async () => {
            const rps = await uploadImg(file);
            console.log(rps, "rps");
            if (rps.code == 200) {
              insertFn(rps.url, rps.name, rps.url);
            } else {
              ElMessage.error("上传失败！");
            }
          };
          uploadFun();
        },
      },
      insertImage: {
        checkImage(src, alt, href) {
          if (src.indexOf("http") !== 0) {
            return "图片网址必须以 http/https 开头";
          }
          return true;
        },
      },
    },
  },
  editorVal: props.getHtml,
});

// 编辑器回调函数
const handleCreated = (editor) => {
  editorRef.value = editor;
  console.log(editor, "editor");
};
// 编辑器内容改变时
const handleChange = (editor) => {
  emit("update:getHtml", editor.getHtml());
  emit("update:getText", editor.getText());
};
// 页面销毁时
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
// 监听是否禁用改变
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
watch(
  () => props.disable,
  (bool) => {
    const editor = editorRef.value;
    if (editor == null) return;
    bool ? editor.disable() : editor.enable();
  },
  {
    deep: true,
  }
);
// 监听双向绑定值改变，用于回显
watch(
  () => props.getHtml,
  (val) => {
    state.editorVal = val;
  },
  {
    deep: true,
  }
);

// 清空编辑器内容的方法
const clearEditorContent = () => {
  const editor = editorRef.value;
  if (editor) {
    editor.clear();
    state.editorVal = "";
    emit("update:getHtml", "");
    emit("update:getText", "");
  }
};
/**
 * 粘贴方法
 */
const customPaste = () => {
  console.log(123);
};
defineExpose({
  clearEditorContent,
});
</script>
